<template>
	<view class="main">
		<view class="title " :class="{show}">
			<view class="planName">
				<view class="planTitle">
					正手击球
				</view>
				<view class="iconfont icon-edit-3" />
			</view>
			<view class="planBrief ">
				简介
			</view>
		</view>
		<view class="step" v-if="plan.currentPlan.showNode">
			<view class="stepTitle" >
				<view class="time" :class="{show}">
					Time/Bind
				</view>
				<view class="node" :class="{show}">
					Node
				</view>
				<view class="move iconfont" :class="show?'icon-chevrons-down':'icon-chevrons-up'" @click="changeShow"/>
			</view>
			<view class='scroll' >
				<Node class="stepItem" v-for="(item,index) in plan.currentPlan.nodeGroup" 
					:key="index" :index="index" @eidt="changePop" @link="linkStep($event)"/>
				<view class="empty"/>
			</view>
		</view>
	</view>
	<editPop :visible="visiblePop" @handle="fromPop">
		<view class="nodeIndex">Node {{currentNode+1}}</view>
	</editPop>
</template>

<script setup>
import { ref } from 'vue';
import { plan }   from '@/work/nodeGroup.js';

const show = ref(true)
const currentNode = ref(0)
function changeShow(){
	show.value=!show.value
}

const visiblePop = ref(false)

function changePop(a){
	visiblePop.value=!visiblePop.value
	currentNode.value = a
}

function linkStep(a){
	console.log("linkStep",a)
	changeShow()
}
function fromPop(){
		visiblePop.value=!visiblePop.value
}

</script>

<style scoped>
.main{
	position:fixed;
	display: flex;
	flex-direction: column;
	height: 100vh;
	width: 100vw;
	background-image: linear-gradient( var(--p-color),var(--l-color));
	
}
.title{
	height: calc(100% - 51px);
	transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.title.show{
	height: 25%;
}
.time.show,.node.show{
	opacity: 1;
}
.planName{
	font-size: 1.6em;
	font-weight: 900;
	margin: 15% 0 0 10%;
	width: 80%;
	display:flex;
	align-items: first baseline;
	justify-content: space-between;
}
.planBrief{
	font-weight: 900;
	margin: 5px 0 0 15%;
}
.empty{
	height: 50px;
}
.step{
	flex: 1;
	display: flex;
	flex-direction: column;
	background-color: white;
	/* 顶部阴影效果 */
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
	border-radius: 20px 20px 0 0;
	padding: 0 6px 5vh  ;
	overflow: hidden;
	}
.move{
	display: flex;
	margin:10px 20px;
	color: var(--p-color);
	font-size: 20px;
	justify-self: end;
	align-items: center;
}
.stepTitle{
	display: flex;
	color: var(--p-color);
	font-weight: 800;
}
.time{
	width: 25%;
	margin: 15px;
	display: flex;
	justify-content: center;
	opacity: 0;
	transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.node{
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: 0.3s all cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nodeIndex{
	color: var(--p-color);
}
.scroll{
	flex: 1;
	overflow: auto;
}

/* 隐藏滚动条但保留滚动功能 */
	.scroll::-webkit-scrollbar {
	            display: none; /* Chrome, Safari, Opera */
	        }
	
	        .scroll {
	            -ms-overflow-style: none;  /* IE and Edge */
	            scrollbar-width: none;  /* Firefox */
	        }
</style>